<template>
  <view class="prize-main-container">
    <view class="border-prize">
      <!-- 边界 -->
      <view class="silde">
        <view class="silde-img">
          <image class="br" :src="br" />
          <image class="br" :src="br" />
        </view>
      </view>
      <view
        class="view-content"
        :style="'margin-top:' + (customBar + 6) + 'px;'"
      >
        <!-- 背景图 -->

        <view class="bg-group">
          <image class="bg-img" :src="bg" mode="widthFix" />
          <!-- <image
            class="bg-img bg-gif"
            :src="
              $IMG_URL +
              '/uploads/20230427/49928c493fa25290023b49e3bdcf5385.gif'
            "
            :class="showBgGif ? 'show' : ''"
            @load="bgGif"
            mode="widthFix"
          /> -->
        </view>
        <!-- autoplay -->
        <view class="render-content">
          <swiper
            class="swiper-goods-group"
            :current="swiperCurrent"
            @transition="transition"
            @animationfinish="animationfinish"
            @change="onChange"
            :duration="duration"
            autoplay
            circular
            :touchable="touchable"
          >
            <swiper-item
              class="swiper-item"
              v-for="(item, index) in list"
              :key="index"
            >
              <image
                class="cover"
                :class="swiperCurrent == index ? '' : 'mini'"
                :src="item.goods_image_text"
                mode="widthFix"
                :lazy-load="true"
                binderror=""
                bindload=""
              />
            </swiper-item>
          </swiper>
          <view class="name-prize" :class="changingActiveName ? 'change' : ''">
            {{ list[swiperCurrent].goods_name || '-' }}
          </view>
          <view class="dot-icon">
            <image
              class="left-hear"
              :class="changingMove ? 'move' : ''"
              :src="l_hear"
              mode="widthFix"
            />
            <image
              class="right-hear"
              :class="changingMove ? 'move' : ''"
              :src="r_hear"
              mode="widthFix"
            />
          </view>
        </view>
      </view>
      <!-- 边界 -->
      <view class="silde">
        <view class="silde-img">
          <image class="br" :src="br" />
          <image class="br" :src="br" />
        </view>
      </view>
    </view>
  </view>
</template>
<script>
/**
 * 福袋 轮播图
 * @property {Object} details 获取轮播图
 */

// 图片
import bg from '../img/bg-7.png';
import br from '../img/silter-1.jpg';
import l_hear from '../img/left-hear.png';
import r_hear from '../img/hear-right.png';
////////

// 获取系统状态栏的高度
let systemInfo = uni.getSystemInfoSync();
let menuButtonInfo = {};
// #ifdef MP-WEIXIN || MP-BAIDU || MP-TOUTIAO || MP-QQ
menuButtonInfo = uni.getMenuButtonBoundingClientRect();
// #endif

import tools from '@/shopro/utils/tools';
const _delay = tools.delayDither(300);
export default {
  // 建议 创建每个组件时 都添加name属性 标识组件名称
  name: '',
  components: {},
  props: {
    details: {
      type: Object,
      default: () => ({
        // 商品轮播图片
        image_list: [],
        // 福袋活动id
        lg_id: '',
        // 福袋名字
        lg_name: '',
      }),
    },
  },
  data() {
    return {
      // 图片
      bg,
      br,
      l_hear,
      r_hear,
      //////

      // 当前轮播索引
      swiperCurrent: 0,
      // 切换轮播时间
      duration: 800,
      // 显示 背景 光环图
      showBgGif: false,
      // 切换时 动态索引图片名字
      changingActiveName: false,
      // 切换时 移动调起动画动作
      changingMove: false,
      // 是否可触碰
      touchable: false,
    };
  },
  // 计算属性 适配者模式
  computed: {
    // 列表
    list() {
      return this.details?.image_list || [];
    },

    // 高度
    customBar() {
      let statusBarHeight = systemInfo.statusBarHeight;
      // #ifndef MP
      return systemInfo.platform == 'android'
        ? statusBarHeight + 50
        : statusBarHeight + 45;
      // #endif
      // #ifdef MP-WEIXIN
      return menuButtonInfo.bottom + menuButtonInfo.top - statusBarHeight;
      // #endif
      // #ifdef MP-ALIPAY
      return statusBarHeight + systemInfo.titleBarHeight;
      // #endif
    },
  },
  // 数据监听
  watch: {},
  /**
   * 生命周期 类似 发布订阅者模式
   * 在实例初始化之前被调用
   */
  beforeCreate() {},
  // 在实例创建完成后被立即调用
  created() {},
  // 在挂载开始之前被调用
  beforeMount() {},
  // 挂载到实例上去之后调用。详见 注意：此处并不能确定子组件被全部挂载，如果需要子组件完全挂载之后在执行操作可以使用nextTick
  mounted() {},
  // 数据更新时调用，发生在虚拟 DOM 打补丁之前
  beforeUpdate() {},
  // 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子
  updated() {},
  // 实例销毁之前调用。在这一步，实例仍然完全可用
  beforeDestroy() {},
  // Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
  destroyed() {},
  methods: {
    // bgGif() {
    //   this.showBgGif = true;
    // },

    /**
     *  页面点击事件 防抖
     * @param {Object} ev  $event
     * @param {String} name 执行名称
     * @param {Object} data 传值
     */
    onClickOperate(ev, name, data = {}) {
      _delay(() => {
        switch (name) {
          case 'event':
            break;
        }
      });
    },
    // swiper-item左右移动，通知tabs的滑块跟随移动
    transition() {
      if (!this.changingMove) {
        this.changingMove = true;
      }
      if (this.changingActiveName) {
        this.changingActiveName = false;
      }
    },
    // 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
    // swiper滑动结束，分别设置tabs和swiper的状态
    animationfinish(e) {
      this.changingActiveName = true;
      this.changingMove = false;
      this.swiperCurrent = e.detail.current;
    },
    // 切换轮播图
    onChange() {},
  },
};
</script>
<style lang="scss" scoped>
view,
image {
  max-width: none;
}
.prize-main-container {
  position: relative;
  width: 100%;
  height: 100%;
  --br-width: 38rpx;
  animation: fade 1s linear 0s 1 normal none;
  .border-prize {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    display: flex;
    overflow: hidden;
    .view-content {
      position: relative;
      flex-grow: 1;
      padding: 0 16rpx;

      .render-content {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        min-height: 100%;

        &::after {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          z-index: 1;
          width: 100%;
          height: 100%;
          background: rgba(255, 255, 255, 0.01);
        }

        .name-prize {
          margin-top: 0;
          text-align: center;
          font-size: 28rpx;
          font-weight: 800;
          color: #ffeb92;
          &.change {
            animation: focus-in-contract 0.6s linear 0s 1 normal none;
          }
        }
        .swiper-goods-group {
          width: 100%;
          height: 690rpx;

          .swiper-item {
            position: relative;
            width: 100%;
            height: 100%;
            .cover.mini {
              transform: translateX(-50%) scale(0.7);
            }
            .cover {
              position: absolute;
              bottom: 80rpx;
              left: 50%;
              transform: translateX(-50%) scale(1.2);
              width: 500rpx;
              height: 500rpx;
              transition: all 0.3s;
            }
          }
        }
      }
    }

    .bg-group {
      position: relative;
      margin: 0 auto;
      width: 100%;
      min-height: 690rpx;
    }
    .bg-img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100.1%;
    }
    .bg-gif {
      opacity: 0;
    }
    .bg-gif.show {
      opacity: 0.6;
    }

    .silde:nth-child(1) {
      .silde-img {
        animation: slide-in-top var(--yfs-silde-time) linear 0s infinite normal
          none;
      }
    }
    .silde {
      position: relative;
      flex-shrink: 0;
      width: var(--br-width);
      height: 910rpx;
      overflow: hidden;
      &::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: 1;
        width: 100%;
        height: 60rpx;
        background-image: linear-gradient(0deg, #4604a2, transparent);
      }
    }
    .silde-img {
      display: flex;
      flex-direction: column;
      width: var(--br-width);
      min-height: 910rpx;
      animation: slide-in-bottom var(--yfs-silde-time) linear 0s infinite normal
        none;
    }
    .br {
      width: 100%;
      height: 910rpx;
    }

    .dot-icon {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 2;
      width: 100%;
      height: 100%;

      .right-hear.move {
        animation: move-in-hear-1 0.6s ease-out 0s 1 normal none;
      }
      .right-hear {
        position: absolute;
        right: -156rpx;
        bottom: -20rpx;
        width: 386rpx;
        height: 339rpx;
        transform-origin: 100% 100% 0;
      }
      .left-hear.move {
        animation: move-in-hear-2 0.6s ease-out 0.3s 1 normal none;
      }
      .left-hear {
        position: absolute;
        top: -10rpx;
        left: -128rpx;
        width: 338rpx;
        height: 284rpx;
        transform-origin: 0 100% 0;
      }
    }
  }
}

@keyframes move-in-hear-1 {
  0% {
    transform: rotateZ(0deg);
  }
  50% {
    transform: rotateZ(-10deg);
  }
  80% {
    transform: rotateZ(2deg);
  }
  100% {
    transform: rotateZ(0deg);
  }
}
@keyframes move-in-hear-2 {
  0% {
    transform: rotateZ(0deg);
  }
  50% {
    transform: rotateZ(10deg);
  }
  80% {
    transform: rotateZ(-2deg);
  }
  100% {
    transform: rotateZ(0deg);
  }
}

@keyframes slide-in-top {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-50%);
  }
}
@keyframes slide-in-bottom {
  0% {
    transform: translateY(-50%);
  }
  100% {
    transform: translateY(0%);
  }
}
</style>
